<template>
  <div>
    <div class="badge">
      <div class="demo-inner-divider">基础类徽标</div>
      <e-badge
        class="badge-margin"
        :count="200"
        :overflow-count="199">
        <a
          href="#"
          class="demo-badge"></a>
      </e-badge>
      <e-badge
        class="badge-margin"
        :count="5">
        <a
          href="#"
          class="demo-badge"></a>
      </e-badge>
      <e-badge
        :count="55">
        <a
          href="#"
          class="demo-badge"></a>
      </e-badge>
    </div>
    <div class="badge">
      <div class="demo-inner-divider">点式徽标</div>
      <e-badge dot>
        <a
          href="#"
          class="demo-badge"></a>
      </e-badge>
    </div>
    <div class="badge">
      <div class="demo-inner-divider">文字式徽标</div>
      <e-badge
        text="new"
        class="badge-margin">
        <a
          href="#"
          class="demo-badge"></a>
      </e-badge>
      <e-badge text="hot">
        <a
          href="#"
          class="demo-badge"></a>
      </e-badge>
    </div>
    <div class="badge">
      <div class="demo-inner-divider">独立使用及自定义样式</div>
      <e-badge
        class="badge-margin"
        :count="10">
      </e-badge>
      <e-badge
        class-name="demo-badge-alone"
        :count="20">
      </e-badge>
    </div>
    <badge-md class="markdown-body"></badge-md>
  </div>
</template>
<script>
import badgeMd from '../../docs/badge.md';
export default {
  props: {},
  components: {
    badgeMd
  },
  data () {
    return {
      count: 290
    };
  },
};
</script>
<style scoped>
  .badge-margin {
    margin-right: 15px;
  }
  .demo-badge{
    width: 42px;
    height: 42px;
    background: #eee;
    border-radius: 6px;
    display: inline-block;
  }
  .demo-inner-divider {
    margin-bottom: 15px;
  }
  .badge {
    margin-bottom: 60px;
  }
</style>
<style>
  .demo-badge-alone{
    background: #5cb85c !important;
  }
</style>
